<template>
    <div class="contract">
        <!-- 签名合同 -->
        <el-button type="info" @click="resetSign" style="margin-bottom: 10px;">重签</el-button>
        <div ref="sign" class="sign" id="ContractSign">
            <canvas id="canvas"></canvas>
        </div>
        <el-button type="primary" style="margin: 10px auto 0 auto;display: block;" @click="submit">提交</el-button>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
export default defineComponent({
    data(){
        return{
            activeName:'',
            canvas:null,
            ctx:null,
            draw:{
                x:0,
                y:0
            }
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    props:{
        dialogVisible:{
            type:Boolean,
            default:false
        }
    },
    watch: {
        dialogVisible:{
            handler(news){
                if(news){
                    this.$nextTick(() => {
                        this.LoadCanvas()
                    });
                }
            },
            deep: true
        }
    },
    mounted () {
        // this.LoadCanvas()
    },
    methods:{
        LoadCanvas(){
            let self = this;
            self.canvas = document.getElementById("canvas");
            let {width} = self.$refs.sign.getBoundingClientRect();
	        self.ctx = self.canvas.getContext("2d");
            var xk = 1;			//线条的大小
            self.canvas.width = width - 40;
            self.canvas.height = "300";
            var x = self.canvas.width; //画布的宽
            var y = self.canvas.height;//画布的高
            self.draw.x = self.canvas.width;
            self.draw.y = self.canvas.height;
            var zhi = { x: 0, y: 0 };	//下笔的初始位置
            var isFal = false;	//检测是否落笔
            var color = null;		//画笔的颜色
            function windowc(x, y) {
                var length = self.canvas.getBoundingClientRect();
                return { x: Math.round(x - length.left), y: Math.round(y - length.top) }
            }
            function move(pain) {
                var xinzhi = windowc(pain.x, pain.y);
                self.ctx.save();
                self.ctx.beginPath();
                self.ctx.strokeStyle = color;
                self.ctx.lineWidth = xk;
                self.ctx.lineCap = "round";
                self.ctx.textJoin = "round";
                self.ctx.moveTo(zhi.x, zhi.y);
                self.ctx.lineTo(xinzhi.x, xinzhi.y);
                self.ctx.closePath();
                self.ctx.stroke();
                self.ctx.restore();
                zhi = xinzhi;
            }
            function jes() {
                isFal = false;
            }
            self.ctx.fillStyle = "#fff"
            self.ctx.fillRect(0,0,x,y);
            self.canvas.onmouseout = function (e) {
                e.preventDefault();
                isFal = false;
            }
            self.canvas.onmousedown = function (e) {
                e.preventDefault();
                zhi = windowc({ x: e.clientX, y: e.clientY });
                isFal = true;
            }
            self.canvas.onmousemove = function (e) {
                e.preventDefault();
                if (isFal) {
                    move({ x: e.clientX, y: e.clientY });
                }
            }
            self.canvas.onmouseup = function (e) {
                e.preventDefault();
                jes()
            }
        },
        resetSign(){
            let self = this;
            let {x,y} = self.draw;
            if(self.ctx == null){
                self.LoadCanvas();
            }else{
                self.ctx.clearRect(0, 0, x, y);
                self.ctx.fillStyle = "#fff";
                self.ctx.fillRect(0,0,x,y);
            }
        },
        submit(){
            let self = this;
            self.canvas.toBlob((f)=>{
                let files = new File([f],"sign.jpg",{
                    type:"image/jpeg"
                })
                self.$emit('getfiles', {f:files});
		    },"image/jpeg")	 
        }
    }
})
</script>
<style scoped>
    .el-tabs__content{
        display: flex;
        justify-content: center;
    }
    .sign{
        width: calc(100% - 30px);
        background-color: antiquewhite;
        padding: 10px 20px;
    }
</style>
